<template>
  <div id="pszl_pie" :style="{ width: '100%', height: '250px' }"></div>
</template>
<script>
import echarts from 'echarts'
// const echartData = [
//   { value: 8499, name: '拍摄正常' },
//   { value: 6487, name: '拍摄异常' },
// ]
let echartData = []
const colorList = ['#F56C6C', '#4ECB73', '#F1BB4C']
export default {
  name: 'pszl_pie',
  props: ['pieData'],
  data() {
    return {}
  },
  mounted() {
    echartData = this.pieData
    var myChart = echarts.init(document.getElementById('pszl_pie'))
    const option = {
      backgroundColor: '#fff',
      title: [
        { text: '图像状况', top: 0, left: 0, textStyle: { color: '#2F3033', fontSize: '16' } },
        {
          text: `{laji|设备数量}\n ${echartData[0].value + echartData[1].value + echartData[2].value}`,
          top: 'center',
          left: 'center',
          textStyle: {
            fontSize: 14,
            // color: '#646566',
            rich: {
              laji: {
                fontSize: 14,
                color: '#646566',
                height: 30,
              },
            },
          },
        },
      ],
      tooltip: {
        formatter: '{b}:{c} ({d}%)',
      },
      color: colorList,
      legend: {
        left: '75%',
        textStyle: {
          rich: {
            0: {
              color: colorList[0],
              fontSize: 12,
            },
            1: {
              color: colorList[1],
              fontSize: 12,
            },
          },
        },
        icon: 'circle',
        formatter: function (name) {
          for (let i = 0; i < echartData.length; i++) {
            if (name === echartData[i].name) {
              // return name + '({' + i + '|' + echartData[i].value + '})'
              return name + ' ' + echartData[i].value
            }
          }
        },
      },
      series: [
        {
          name: '拍摄状况',
          type: 'pie',
          radius: ['35%', '80%'],
          center: ['50%', '50%'],
          hoverAnimation: true,
          avoidLabelOverlap: false,
          data: echartData,
          label: {
            normal: {
              show: false,
              position: 'center',
              formatter: '{b}\n{text|{d}%}',
              rich: {
                text: {
                  align: 'center',
                  verticalAlign: 'middle',
                  padding: 8,
                  fontSize: 16,
                },
                value: {
                  align: 'center',
                  verticalAlign: 'middle',
                  fontSize: 20,
                },
              },
            },
            emphasis: {
              show: false,
            },
          },
        },
        {
          radius: ['35%', '40%'],
          center: ['50%', '50%'],
          type: 'pie',
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          animation: false,
          tooltip: {
            show: false,
          },
          data: [
            {
              value: 1,
              itemStyle: {
                color: 'rgba(250,250,250,0.3)',
              },
            },
          ],
        },
      ],
    }
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      //   让我们图表调用resize方法
      myChart.resize()
    })
  },
}
</script>
<style lang="scss"></style>
